<script setup lang="ts" name="PromotionCombinationProperty">
import { PromotionCombinationProperty } from './config'
import { usePropertyForm } from '@/components/Designer/utils/index'
import { CombinationApi, CombinationActivityType } from '@/api/mall/promotion/combination'
import { CommonStatusEnum } from '@/enums/commonEnums'

// 拼团属性面板

const props = defineProps<{ modelValue: PromotionCombinationProperty }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)
// 活动列表
const activityList = ref<CombinationActivityType[]>([])
onMounted(async () => {
  const { list } = await CombinationApi.Activity.page({
    status: CommonStatusEnum.ENABLE
  })
  activityList.value = list
})
</script>

<template>
  <MallProperty v-model="formData.style">
    <ElForm label-width="80px" :model="formData">
      <ElCard header="拼团活动" class="property-group" shadow="never">
        <ElFormItem label="拼团活动" prop="activityId">
          <ElSelect v-model="formData.activityId">
            <ElOption v-for="activity in activityList" :key="activity.id" :label="activity.name" :value="activity.id" />
          </ElSelect>
        </ElFormItem>
      </ElCard>
      <ElCard header="商品样式" class="property-group" shadow="never">
        <ElFormItem label="布局" prop="type">
          <ElRadioGroup v-model="formData.layoutType">
            <ElTooltip class="item" content="单列" placement="bottom">
              <ElRadioButton label="oneCol">
                <SvgIcon icon="fluent:text-column-one-24-filled" />
              </ElRadioButton>
            </ElTooltip>
            <ElTooltip class="item" content="三列" placement="bottom">
              <ElRadioButton label="threeCol">
                <SvgIcon icon="fluent:text-column-three-24-filled" />
              </ElRadioButton>
            </ElTooltip>
          </ElRadioGroup>
        </ElFormItem>
        <ElFormItem label="商品名称" prop="fields.name.show">
          <div class="flex gap-8px">
            <ColorInput v-model="formData.fields.name.color" />
            <ElCheckbox v-model="formData.fields.name.show" />
          </div>
        </ElFormItem>
        <ElFormItem label="商品价格" prop="fields.price.show">
          <div class="flex gap-8px">
            <ColorInput v-model="formData.fields.price.color" />
            <ElCheckbox v-model="formData.fields.price.show" />
          </div>
        </ElFormItem>
      </ElCard>
      <ElCard header="角标" class="property-group" shadow="never">
        <ElFormItem label="角标" prop="badge.show">
          <ElSwitch v-model="formData.badge.show" />
        </ElFormItem>
        <ElFormItem v-if="formData.badge.show" label="角标" prop="badge.imgUrl">
          <UploadImage v-model="formData.badge.imgUrl" height="44px" width="72px">
            <template #tip> 建议尺寸：36 * 22 </template>
          </UploadImage>
        </ElFormItem>
      </ElCard>
      <ElCard header="商品样式" class="property-group" shadow="never">
        <ElFormItem label="上圆角" prop="borderRadiusTop">
          <ElSlider v-model="formData.borderRadiusTop" :max="100" :min="0" show-input input-size="small" :show-input-controls="false" />
        </ElFormItem>
        <ElFormItem label="下圆角" prop="borderRadiusBottom">
          <ElSlider v-model="formData.borderRadiusBottom" :max="100" :min="0" show-input input-size="small" :show-input-controls="false" />
        </ElFormItem>
        <ElFormItem label="间隔" prop="space">
          <ElSlider v-model="formData.space" :max="100" :min="0" show-input input-size="small" :show-input-controls="false" />
        </ElFormItem>
      </ElCard>
    </ElForm>
  </MallProperty>
</template>

<style scoped lang="scss"></style>
